<template>
  <div class="hardwareArea" style="margin-top: 20px">
    <el-row :gutter="24">
      <!--          v-infinite-scroll="load"-->
      <el-col
          :span="6"
          v-for="(hardware, index) in hardwareData"
          :key="index"
          style="margin-top: 10px"
      >
        <el-card shadow="never">
          <div slot="header">
            <el-row>
              <span style="display:flex;float: right">{{ hardware.title }}</span>
              <el-tag type="success"
              >编号 {{ hardware.id }}
              </el-tag
              >
            </el-row>

            <el-tag type="info" style="display:flex;float: right"
            >月销量 {{ hardware.sales }}
            </el-tag
            >
            <el-rate
                v-model=hardware.rate
                disabled
                show-score
                text-color="#ff9900"
                score-template="{value}">
            </el-rate>

          </div>
          <div>
            <el-popover
                title="店铺简介"
                trigger="hover"
                :content="hardware.brief"
            >
              <el-carousel trigger="click" autoplay :interval=5000 slot="reference">
                <el-carousel-item v-for="photo in hardware.photos" :key=photo>
                  <el-image :src=photo fit="scale-down" :preview-src-list=hardware.photos>
                    <div slot="error" class="image-slot">
                      <i class="el-icon-picture-outline"></i>
                    </div>
                  </el-image>
                </el-carousel-item>
              </el-carousel>
            </el-popover>
          </div>
          <div align="center" style="justify-content: space-between;display: flex">
            <el-popconfirm
                icon="el-icon-info"
                icon-color="red"
                title="确定删除该店铺吗"
                @onConfirm="deleteShop(hardware.id)"
            >
              <el-button
                  slot="reference"
                  size="small"
                  type="danger"
                  round
                  icon="el-icon-delete"
              >
              </el-button>
            </el-popconfirm>
            <el-tooltip effect="light" content="点击进入详情" placement="top">
              <el-button
                  size="medium"
                  type="primary"
                  round
                  icon="el-icon-search"
                  @click="$router.push({path:'/hardware/shopDetail',query:{mode:'more',id:hardware.id}})"
              >
              </el-button>
            </el-tooltip>
            <el-tooltip effect="light" content="点击修改" placement="top">
              <el-button
                  size="small"
                  type="warning"
                  round
                  icon="el-icon-edit"
                  @click="$router.push({path:'/hardware/shopDetail',query:{mode:'update',id:hardware.id}})"
              >
              </el-button>
            </el-tooltip>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="query.page"
        :page-sizes="[4, 8, 12, 16]"
        :page-size="query.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: "overview",
  data(){
    return{

    }
  },
  methods:{
    async getHardwareList() {
      // 调用post请求
      const {data: res} = await this.$http.get("getHardwareList", {
        params: this.queryInfo
      });
      this.hardwarelist = res.data; // 将返回数据赋值
      this.total = res.numbers; // 总个数
    },
    // 监听pageSize改变的事件
    handleSizeChange(newSize) {
      this.queryInfo.pageSize = newSize;
      this.getHardwareList(); // 数据发生改变重新申请数据
    },
    // 监听pageNum改变的事件
    handleCurrentChange(newPage) {
      this.queryInfo.pageNum = newPage;
      this.getHardwareList(); // 数据发生改变重新申请数据
    },
  }
}
</script>

<style scoped>

</style>